import { createApp } from "vue"
import {createRouter, createWebHashHistory} from 'vue-router'
import App from './App.vue'

import Demo1 from './components/DemoOne'
import Demo2 from './components/DemoTwo'
import UserInfo from './components/UserInfo'
import UserSetting from './components/UserSetting'
import UserDetails from './components/UserDetails'
import MyFriends from './components/MyFriends'
import AreaDetails from './components/AreaDetails'
import RouteParam from './components/RouteParam'
import RouteLifeCycle from './components/RouteLifeCycle'


const app = createApp(App)

const routes = [
    {path: '/demo1', component : Demo1 },
    {path: '/demo2', component : Demo2 },
    {path: '/user/info/:username/:id', name:"user", component : UserInfo },
    /***用正则可以解决路径冲突 */
    {path: '/user/info/:id(\\d+)', component : UserSetting },
    {path: '/area/details/:areas*', component : AreaDetails },
    {path: '/user/:username', component : UserDetails,
    children:[{
        path: 'friends/:count', component: MyFriends
    }]},
    /*** 多页面同传参 props : {name0:true, name1:true,}, props还支持函数返回 **/
    {path: '/route/param/:id', component : RouteParam, props:true},
    {path: '/route/lifeCycle', component : RouteLifeCycle},
]

const router = createRouter({
    history: createWebHashHistory(),
    routes : routes
})

/***
 * 路由导航守卫
 * 全局前置
 */
router.beforeEach((to,from)=>{
    console.log(to)
    console.log(from)
    return true
})

/**
 * 全局后置，可用于跟踪
 */
router.afterEach((to,from, failure)=>{
    console.log(to)
    console.log(from)
    console.log(failure)
});



app.use(router)

app.mount("#app")
